<template>
  <div class="collect-box">
    <crumb-tit>
      <span slot="breadTit">提交信息配置</span>
      <span slot="secondTit">提交信息配置</span>
    </crumb-tit>
    <main-i />
    <leave-tip-dialog
      ref="leaveTip"
      @leavelHandler="leavelHandler"
    >
      <div slot="tip-slot">
        有部分配置变更尚未保存，<br>
        确定要离开当前页面妈
      </div>
    </leave-tip-dialog>
  </div>
</template>
<script>
import CrumbTit from '@/components/pc/config/CrumbTit'
import MainI from '@/components/pc/config/collect/MainLayout'
import LeaveTipDialog from '@/components/pc/LeaveTipDialog'
import { mapState } from 'vuex'
export default {
  components: {
    MainI,
    CrumbTit,
    LeaveTipDialog
  },
  data () {
    return {
      leave: {},
      status: false,
      count: 0
    }
  },
  computed: {
    ...mapState('config/collect', ['datas', 'datasReady'])
  },
  watch: {
    datas: {
      handler (val) {
        if (val) {
          this.count++
        }
      },
      deep: true
    }
  },
  beforeRouteLeave (to, from, next) {
    if (this.count > 1) {
      if (this.status) {
        next()
        return
      }
      this.$refs.leaveTip.changeLimitDialog(true)
      this.leave = to
      next(false)
    } else {
      next()
    }
  },
  mounted () {
  },
  methods: {
    leavelHandler (b) {
      const { leave } = this
      if (b) {
        this.status = true
        this.$router.push({ name: leave.name, query: leave.query, params: leave.params })
      } else {
        this.status = false
      }
      this.$refs.leaveTip.changeLimitDialog(false)
    }
  }
}
</script>

